/**
  开发配置
  即使是在开发环境中 项目也是被分析打包之后才能显示在浏览器上 只不过打包后的文件被存放在内存中而不是磁盘中
 */

const HtmlWebpackPlugin = require('html-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader')
const { DefinePlugin } = require('webpack')
const path = require('path')

module.exports = {
  mode: 'development',
  // source map 官网推荐最佳选择
  devtool: 'eval-cheap-module-source-map',
  entry: {
    main: './src/main.ts'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/[name].js'
  },
  resolve: {
    // 在导入时把扩展名写全就可以不用这个配置项
    extensions: ['.vue', '.js', '.ts', '.scss', '.json'],
    alias: {
      '@': path.resolve(__dirname, 'src'),
      vue$: 'vue/dist/vue.esm-bundler.js'
    }
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        include: [path.resolve(__dirname, 'src')]
      },
      // 解析 TypeScript（.ts 文件）
      {
        test: /\.ts$/,
        loader: 'ts-loader',
        options: {
          // 让ts-loader处理Vue中的TS代码
          appendTsSuffixTo: [/\.vue$/]
        },
        include: [path.resolve(__dirname, 'src')]
      },
      // Babel处理JS文件
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
            cacheDirectory: true, // 启用缓存（默认缓存到 node_modules/.cache/babel-loader）
            cacheCompression: false // 开发环境不压缩缓存，提升速度
          }
        },
        include: [path.resolve(__dirname, 'src')]
      },
      // 解析 CSS
      {
        test: /\.css$/,
        use: [
          'vue-style-loader', // 将 CSS 注入到 DOM
          'css-loader' // 解析 CSS 文件
        ],
        include: [
          // 指定处理目录的css 不仅仅是src 还包括node_modules中需要样式处理的第三方包
          path.resolve(__dirname, 'src'),
          path.resolve(__dirname, 'node_modules/element-plus')
        ]
      },
      // 解析 SASS（.vue 文件中的 <style lang="scss"> 标签会用到）
      {
        test: /\.scss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader' // 需要额外安装 sass 和 sass-loader
        ],
        include: [path.resolve(__dirname, 'src')]
      },
      // 图片处理
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        type: 'asset', // 自动选择处理方式
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024 // 10KB 以下的图片嵌入到 bundle 中
          }
        },
        generator: {
          // 输出的图片文件路径和名称
          filename: 'assets/images/[hash][ext][query]'
        },
        include: [path.resolve(__dirname, 'src')]
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'public/index.html'),
      filename: 'index.html',
      inject: 'body'
    }),
    new DefinePlugin({
      // 开发环境默认根路径
      'process.env.BASE_URL': JSON.stringify('/'),
      __VUE_OPTIONS_API__: JSON.stringify(true),
      __VUE_PROD_DEVTOOLS__: JSON.stringify(false),
      __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: JSON.stringify(false)
    })
  ],
  // 开发服务器
  devServer: {
    static: path.join(__dirname, 'dist'),
    historyApiFallback: true,
    port: 7070,
    // 压缩传输
    compress: true,
    // 热模块替换
    hot: true,
    open: true,
    watchFiles: {
      paths: ['src/**/*'],
      options: {
        ignored: /node_modules/, // 忽略 node_modules 目录（无需监听）
        aggregateTimeout: 300 // 文件变化后延迟 300ms 再编译（减少频繁触发）
      }
    }
  },
  stats: {
    errorDetails: true
  }
}
